<template>
  <div>
    <div class="box">
      <!-- 图标 -->
      <div class="icon">
        <van-icon
          size="20px"
          name="arrow-left"
          @click="iconReturn"
        />
      </div>
      <!-- 搜索框 -->
      <div class="search">
        <van-search

          shape="round"
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @input="updatesearchList"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <!-- 循环列表事件 -->
    <!-- <div
      class="resultList"
      v-for="(item,i) in searchList"
      :key="i"
    >
      <van-icon
        size="20px"
        color="#999"
        class="resultIcon"
        name="search"
      />
      <span v-html="getHighlightHTML(item)" />
      <van-cell
        class="resultSearch"
        title="/"
      />
    </div> -->

    <!-- 答案写法 -->
    <van-list
      v-model="loading"
      :finished="true"
    >
      <van-cell
        v-for="item in searchList"
        :key="item"
      >
        <van-icon name="search" />
        <span v-html="getHighlightHTML(item)" />
      </van-cell>
    </van-list>

  </div>
</template>
<script>
// import axios from 'axios';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'OnSerach',
  data() {
    return {
      value: '',
      loading: false,

    };
  },
  computed: {
    ...mapState('search', [
      'searchList'
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updatesearchList',
    ]),
    onSearch() {
      // this.updatesearchList(e)
      this.$router.push({
        path: '/search-result',
        query: {
          q: this.value
        }
      })
    },
    iconReturn() {
      // this.$router.push('/')
      // 返回上一层
      this.$router.go(-1)

      // this.$nextTick(()=>{
      //   console.log(this.$refs.qingkong.innerHTML);
      // })

    },
    getHighlightHTML(str) {
      // 'angular' >>> '<span class="highlight">a</span>ngular'
      return str.toLowerCase().replace(this.value, `<span class="highlight">${ this.value }</span>`);
    },

  },
}
</script>

<style lang="less" scoped>
.box{
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.icon{
  flex: 1;
  text-align: center;
}
.search{
  flex: 12;
}
.resultList{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.resultIcon{
  flex: 1;
  margin-left: 20px;
}
.resultSearch{
  flex: 9;

}
::v-deep .highlight{
  color:red;
}

</style>
